import React from 'react';
import Util from '../../common/util.js';
import Loader from '../../common/loader.js';
import Modal from '../../common/modal.js';

import Api from '../api/address-api.js';

var scope;
export default class AddressList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editDisplayH: 'hidden'
        };
        scope = this;
    };


    consigneeInfo(obj) {
        return (
            <div onClick={scope.goOrder.bind(this,obj)} className="addressInfo">
                <div className="f-fl contact">{obj.contact}</div>
                <div className="tel">{obj.tel}</div>
                <div className="clear"></div>
                <div className="address-info">
                    <div className={"default-btn " + (obj.is_default == 1 ? 'show' : 'hidden')}>默认</div>
                    <p>{obj.province}-{obj.city}-{obj.district}-{obj.address}</p>
                </div>
                <div className={"choose "+ (obj.isChoose ? 'show' : 'hidden')}></div>
                <div className="clear"></div>
            </div>
        )
    };


    editBox(obj) {
        return (
            <div className={"editBox " + scope.state.editDisplayH}>
                <div className={"f-fl default "+ (obj.is_default == 1 ? 'hidden' : 'show')}
                     onClick={scope.setDefault.bind(this,obj)}>
                    设为默认
                </div>
                <div className={"f-fl redact " + (obj.is_default == 1 ? 'changeWidthL' : '')}
                     onClick={scope.handleRedact.bind(this,obj)}>
                    编辑 <img src='images/setting.png' alt=""/>
                </div>
                <div className={"f-fr delete " + (obj.is_default == 1 ? 'changeWidthL' : '')}
                     onClick={scope.deleteAddress.bind(this,obj)}>
                    删除 <img src='images/delete.png' alt=""/>
                </div>
            </div>
        )
    };

    editBtn() {
        return (
            <div className="editBox">
                <div className={"btn-box "}>
                    <div className="edit-btn" onClick={scope.editClick}>编辑</div>
                </div>
                <div className={"btn-box "+scope.state.editDisplayH}>
                    <div className="add-btn " onClick={scope.toAddressForm}>添加新地址</div>
                </div>
            </div>
        )
    };

    componentWillMount() {
        Loader.start();
        scope.setState({
            list: scope.getAddressList()
        });
    };

    componentDidMount() {
        Loader.end();
    };

    getAddressList() {
        let list = Api.list();
        if(!list || list.length == 0){
            return [];
        }

        list.forEach(function(address){
            address.isChoose = false;
            if(address.is_default == 1){
                address.isChoose = true;
            }
        });

        var currentChooseAddress = Util.storage().get('currentChooseAddress');
        if(currentChooseAddress){
            list.forEach(function(address){
                address.isChoose = false;
                if(currentChooseAddress.id == address.id){
                    address.isChoose = true;
                }
            });
        }
        return list;
    };


    render() {
        var consigneeItems = scope.state.list.map(function (obj) {
            return (
                <li key={'consignee-' + obj.id}>
                    {scope.consigneeInfo(obj)}
                    {scope.editBox(obj)}
                </li>
            );
        });
        return (
            <div>
                <ul className="address-list">
                    {consigneeItems}
                </ul>
                {scope.editBtn()}
            </div>

        )
    };

    editClick() {
        scope.setState({
            editDisplayH: ''
        });
    };

    setDefault(obj) {
        scope.resetAllAddressUnDefault();
        obj.is_default = 1;
        Api.saveOrUpdate('put', obj, function () {
            scope.setState({
                editDisplayH: 'hidden'
            })
        });
    };

    resetAllAddressUnDefault() {
        scope.state.list.map(function (obj) {
            obj.is_default = 0;
        });
    };

    handleRedact(obj) {
        Util.storage().put('address', obj);
        var page = Util.getUrlParam('page');
        if (page) {
            window.location.href = 'address.html?type=form&page=order&appid=' + scope.props.appId;
        } else {
            window.location.href = 'address.html?type=form&appid=' + scope.props.appId;
        }
    };

    toAddressForm() {
        var page = Util.getUrlParam('page');
        if (page) {
            Util.storage().put('address', Api.emptyAddress());
            window.location.href = 'address.html?type=form&page=order&appid=' + scope.props.appId;
        } else {
            Util.storage().put('address', Api.emptyAddress());
            window.location.href = 'address.html?type=form&appid=' + scope.props.appId;
        }
    };

    deleteAddress(obj) {
        Modal.modal({
            isSuccess: true,
            header: '您确认要删除吗？',
            body: '',
            firstBtn: {
                text: '取消'
            },
            secondBtn: {
                text: '确认',
                isCallback: function () {
                    Api.delete(obj.id);
                }
            },
            lowerBody: false
        });

    };

    goOrder(obj) {
        var page = Util.getUrlParam('page');
        if (page == 'order') {
            Util.storage().put('selectAddressId', obj.id);
            Util.storage().put('currentChooseAddress', obj);
            window.location.href = 'order.html?type=buy&appid=' + scope.props.appId;
        }
    };
};